<template>
	<view class="content">
		<u-navbar back-text="" title="">
			<view style="width: 100%;display: flex;justify-content: center;font-weight: bold;font-size: 34rpx;">
				二维码名片
			</view>
			<view slot="right">
				<view style="margin-right: 80rpx;margin-top: 8rpx;">
					<!-- <image @click="gosharepage" src="/static/images/share.png" style="width: 50rpx;" mode="widthFix"></image> -->
				</view>
			</view>
		</u-navbar>

		<view style="margin-top: 100rpx;">
			<u-avatar :src="$store.state.common.systemInfo.fileurl + 'avatar/' + user.id + '.jpg'"></u-avatar>
		</view>

		<view style="margin-top: 20rpx;font-weight: bold;color: #2a2a2a;">
			{{user.name}}
		</view>

		<view style="margin-top: 120rpx;">
			<image :src="qrcodeDataURL" :show-menu-by-longpress="true" style="width: 450rpx;height: 450rpx;"></image>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		sub
	} from '../../common/event';
	import QRCode from 'qrcode'
	import config from '../../config'
	export default {
		data() {
			return {
				id: '',
				qrcodeDataURL: ''
			}
		},
		onLoad({
			id
		}) {
			this.id = id
			this.generateQRCode(`userewm_${this.user.id}`)
		},
		computed: {
			...mapState({
				user:(state)=>{
					return state.user.user
				}
			})
		},
		methods: {
			generateQRCode: async function(text) {
				// #ifdef H5
				QRCode.toDataURL(text, {
						errorCorrectionLevel: 'H'
					})
					.then(url => {
						console.log(url)
						this.qrcodeDataURL = url
					})
					.catch(err => {
						console.error(err)
					})
				// #endif

				// #ifdef APP
				const ret = await this.$u.post(`common/common/makeewm`, {
					text
				})
				if (ret && ret.success) {
					this.qrcodeDataURL = ret.data
				}
				// #endif

			},
			save64image: function() {
				const base64Data = this.qrcodeDataURL

			},
			gosharepage: function() {
				uni.navigateTo({
					url: "/pages/friend/sharegroup?id="+this.id+"&name="+this.info.name
				})
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		overflow-y: auto;
		background: #FFF;
	}
</style>